import React, { useRef, useEffect } from 'react';
import G6 from '@antv/g6';
import { Button } from 'antd';
import { SyncOutlined } from '@ant-design/icons';

const TopologyGraph = ({ data }) => {
  const graphRef = useRef(null);
  const containerRef = useRef(null);
  // 初始化拓扑图
  useEffect(() => {
    if (containerRef.current && !graphRef.current) {
      const newGraph = new G6.Graph({
        container: containerRef.current,
        width: containerRef.current.offsetWidth,
        height: containerRef.current.offsetHeight,
        modes: {
          default: [
            'drag-canvas',
            // 移除默认的zoom-canvas模式，避免与自定义缩放冲突
            { type: 'drag-node', enableDelegate: true }
          ],
        },
        defaultNode: {
          type: 'rect',
          width: 120,
          height: 60,
          style: {
            fill: '#fff',
            stroke: '#1890ff',
            strokeWidth: 2,
          },
          labelCfg: {
            style: { fill: '#000' },
            position: 'center'
          },
        },
        defaultEdge: {
          type: 'polyline',
          style: { stroke: '#999', strokeWidth: 1.5 },
        },
      });
      graphRef.current = newGraph;

      // 添加滚轮事件监听（自定义实现缩放）
      const container = containerRef.current;
      const handleWheel = (e) => {
        e.preventDefault();
        if (!graphRef.current) return;
        const zoom = graphRef.current.getZoom();
        const delta = e.deltaY > 0 ? -0.1 : 0.1;
        const newZoom = Math.max(0.5, Math.min(2, zoom + delta));
        graphRef.current.zoomTo(newZoom);
        graphRef.current.paint();
      };
      container.addEventListener('wheel', handleWheel);

      // 清理函数
      return () => {
        if (graphRef.current) {
          graphRef.current.destroy();
          graphRef.current = null;
        }
        container.removeEventListener('wheel', handleWheel);
      };
    }
  }, []);
  // 更新拓扑图数据
  useEffect(() => {
    if (graphRef.current && data) {
      // 先清空现有数据
      graphRef.current.clear();
      graphRef.current.data(data);
      graphRef.current.render();
      graphRef.current.layout({
        type: 'dagre',
        rankdir: 'TB',
        nodesep: 60,
        ranksep: 80,
      });
    }
  }, [data]);
  // 居中
  const handleFitView = () => {
    if (graphRef.current) {
      graphRef.current.fitView(0.2);
      graphRef.current.paint();
    }
  };
  // 放大
  const handleZoomIn = () => {
    if (graphRef.current) {
      const zoom = graphRef.current.getZoom();
      if (zoom < 2) {
        graphRef.current.zoomTo(zoom + 0.1);
        graphRef.current.paint();
      }
    }
  };
  // 缩小
  const handleZoomOut = () => {
    if (graphRef.current) {
      const zoom = graphRef.current.getZoom();
      if (zoom > 0.5) {
        graphRef.current.zoomTo(zoom - 0.1);
        graphRef.current.paint();
      }
    }
  };
  return (
    <div style={{ position: 'relative', height: '100%' }}>
      <div ref={containerRef} style={{ width: '100%', height: '100%' }} />
      <div style={{ position: 'absolute', bottom: '20px', right: '20px', display: 'flex', gap: '10px' }}>
        <Button icon={<SyncOutlined />} onClick={handleFitView}>居中</Button>
        <Button onClick={handleZoomIn}>+</Button>
        <Button onClick={handleZoomOut}>-</Button>
      </div>
    </div>
  );
};
export default TopologyGraph;